<template>
    <view class="app-timer">
        <app-jump-button form :url="info.link.url" :open_type="info.link.openType" arrangement="column">
            <view v-if="info.picUrl">
                <app-image :img-src="info.picUrl" mode="widthFix" width="750rpx" height="auto"></app-image>
            </view>
            <view :style="{'background-image':  `url(${info.bgPicUrl ? info.bgPicUrl : ''})`,paddingTop: timerStr ? `${info.c_padding_top}rpx`: 0}"
                  class="timer dir-top-nowrap"
                  >
                <view v-if="info.type == 1" :style="{paddingLeft: `${info.c_padding_left}px`}">
                    <template v-if="timerStr">
                        <view :style="{color: info.title_color}" class="time-label">{{ titleText}}</view>
                        <view :style="{color: info.text_color}">{{ timerStr }}</view>
                    </template>
                    <view v-else :style="{color: info.title_color}" class="time-label" style="line-height: 140rpx">{{ titleText}}</view>
                </view>
                <view v-if="info.type == 2" class="diy-timer-type2" :style="{paddingLeft: `${info.c_padding_left}px`}">
                    <template v-if="timerStr">
                        <view :style="{color: info.title_color}" class="time-label">{{ titleText }}</view>
                        <view :style="{color: info.place_text_color}" class="dir-left-nowrap cross-center">
                            <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.d }}</view>
                            <view class="time-text">天</view>
                            <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.h }}</view>
                            <view class="time-text">时</view>
                            <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.m }}</view>
                            <view class="time-text">分</view>
                            <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.s }}</view>
                            <view class="time-text">秒</view>
                        </view>
                    </template>
                    <view v-else :style="{color: info.title_color}" class="time-label" style="line-height: 140rpx">{{ titleText}}</view>
                </view>
                <view v-if="info.type == 3" class="diy-timer-type3">
                    <template v-if="timerStr">
                        <view :style="{color: info.title_color}"
                              class="dir-left-nowrap cross-center main-center time-label">
                            <view class="line" :style="{borderColor: info.title_color}"></view>
                            <view style="margin: 0 18rpx;line-height: 1">{{ titleText }}</view>
                            <view class="line" :style="{borderColor: info.title_color}"></view>
                        </view>
                        <view :style="{color: info.place_text_color}" class="dir-left-nowrap cross-center main-center">
                            <view class="time-box main-center cross-center" :style="[typeFour]">
                                {{ realTime.d }}
                            </view>
                            <view class="time-text">天</view>
                            <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.h }}</view>
                            <view class="time-text">时</view>
                            <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.m }}</view>
                            <view class="time-text">分</view>
                            <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.s }}</view>
                            <view class="time-text">秒</view>
                        </view>
                    </template>
                    <view v-else :style="{color: info.title_color,height: 'inherit'}"
                          class="dir-left-nowrap cross-center main-center time-label">
                        <view class="line" :style="{borderColor: info.title_color}"></view>
                        <view style="margin: 0 18rpx;line-height: 1;font-size: 45rpx">{{ titleText }}</view>
                        <view class="line" :style="{borderColor: info.title_color}"></view>
                    </view>
                </view>
                <view v-if="info.type == 4" class="diy-timer-type4">
                    <view v-if="timerStr" :style="{color: info.place_text_color}" class="dir-left-nowrap cross-center main-center">
                        <view :style="{color: info.title_color}" class="t-omit" style="margin-right: 18rpx">
                            {{ titleText }}
                        </view>
                        <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.d }}</view>
                        <view class="time-text">天</view>
                        <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.h }}</view>
                        <view class="time-text">:</view>
                        <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.m }}</view>
                        <view class="time-text">:</view>
                        <view class="time-box main-center cross-center" :style="[typeFour]">{{ realTime.s }}</view>
                    </view>
                    <view v-else :style="{color: info.title_color,textAlign: 'center',paddingTop: '86rpx'}" class="t-omit">
                        {{ titleText }}
                    </view>
                </view>
            </view>
        </app-jump-button>
    </view>
</template>

<script>
import {mapState} from 'vuex';

export default {
    name: "app-timer",
    props: {
        info: Object,
    },
    data() {
        return {
            timeInterval: null,
            startTime: null,
            endTime: null,
            timerStr: null,
            realTime: {d: '00', h: '00', m: '00', s: '00'}
        };
    },
    computed: {
        ...mapState({
            appImg: state => state.mallConfig.__wxapp_img
        }),
        titleText() {
            let {title_before, title_progress, title_after} = this.info;
            if (this.startTime) {
                return title_before;
            }
            if (this.startTime === null && this.endTime) {
                return title_progress;
            }
            if (this.startTime === null && this.endTime === null) {
                return title_after;
            }
        },
        typeFour() {
            let {bg_color, text_color} = this.info;
            return {
                background: bg_color,
                color: text_color,
            }
        },
        time() {
            return {
                startDateTime: this.info.startDateTime,
                endDateTime: this.info.endDateTime,
                pageHide: this.info.pageHide,
            };
        }
    },
    beforeDestroy() {
        clearInterval(this.timeInterval);
    },
    watch: {
        time: {
            handler() {
                if (this.info.pageHide) {
                    clearInterval(this.timeInterval);
                    return;
                }
                let startDateTime = this.info.startDateTime;
                let endDateTime = this.info.endDateTime;

                this.timeInterval = setInterval(() => {
                    let startTime = null, endTime = null, timerStr = null;
                    if (startDateTime) {
                        startDateTime = startDateTime.replace(/-/g, '/');
                        startTime = this.$utils.timeDifference(new Date().getTime(), new Date(startDateTime).getTime());
                        if (startTime) {
                            timerStr = (startTime['d'] > 0 ? startTime['d'] + '天' : '') + startTime['h'] + '小时' + startTime['m'] + '分' + startTime['s'] + '秒';
                            this.realTime = startTime;
                        }
                    }
                    if (endDateTime && !timerStr) {
                        endDateTime = endDateTime.replace(/-/g, '/');
                        endTime = this.$utils.timeDifference(new Date().getTime(), new Date(endDateTime).getTime());
                        if (endTime) {
                            timerStr = (endTime['d'] > 0 ? endTime['d'] + '天' : '') + endTime['h'] + '小时' + endTime['m'] + '分' + endTime['s'] + '秒';
                            this.realTime = endTime;
                        }
                    }
                    this.startTime = startTime;
                    this.endTime = endTime;
                    this.timerStr = timerStr;
                }, 1000);
            },
            immediate: true
        }
    }
}
</script>

<style scoped lang="scss">
.diy-timer-type2 .time-label {
    font-size: 28#{rpx};
    color: #FFFFFF;
    line-height: 40#{rpx};
    margin-bottom: 6#{rpx};
}

.diy-timer-type2 .time-box {
    width: 42#{rpx};
    line-height: 40#{rpx};
    font-size: 28#{rpx};
    border-radius: 4#{rpx};
}

.diy-timer-type2 .time-text {
    margin: 0 4#{rpx};
}

.diy-timer-type3,.diy-timer-type4 {
    height: 100%;
}
.diy-timer-type3 .time-label {
    font-size: 30#{rpx};
    width: 100%;
    margin-bottom: 10#{rpx};
}

.diy-timer-type3 .time-box {
    width: 68#{rpx};
    line-height: 64#{rpx};
    font-size: 45#{rpx};
    border-radius: 6#{rpx};
}

.diy-timer-type3 .time-text {
    margin: 0 18#{rpx};
}

.diy-timer-type3 .line {
    height: 1px;
    width: 60#{rpx};
    border-top-style: dashed;
    border-top-width: 1px;
}

.diy-timer-type4 .time-label {
    font-size: 56#{rpx};
    line-height: 1;
    text-align: center;
    font-weight: 800;
    width: 100%;
    margin-bottom: 20#{rpx};
}

.diy-timer-type4 .time-box {
    width: 42#{rpx};
    line-height: 40#{rpx};
    font-size: 28#{rpx};
    border-radius: 4#{rpx};
}

.diy-timer-type4 .time-text {
    margin: 0 8#{rpx};
}

.timer {
    width: 100%;
    height: 140#{rpx};
    font-size: $uni-font-size-general-one;
    color: #ffffff;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
</style>